/* ページ全体のスクロールバーを常に表示し、リロード時のレイアウトのズレを防ぐ */
html {
  overflow-y: scroll;
}

/* --- 色やサイズの変数を定義 --- */
:root {
    --square-size: 50px;
    --board-bg-color: green;
    --board-border-color: #333;
    --sign-bg-color: saddlebrown;
    --sign-text-color: white;

    --score-header-player-bg: #ff3122;
    --score-header-score-bg: #ff6600;
    --score-header-point-bg: #ff9966;
    --score-header-total-bg: #ffcc66;

    --stone-shadow: 1px 1px 3px rgba(0,0,0,0.3);
    --highlight-color: #ffc107;
}

/* --- 基本的なスタイル --- */
body {
    font-family: sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f0f0f0 ; /* 見た目のために少し背景色を追加 */
}


table {
    border-collapse: collapse;
}

/* --- 全体レイアウト --- */
.page-header {
    /* 以前tableにあったスタイルをここに移動 */
    background-color: white;
    border: 2px solid saddlebrown;
    padding: 5px 15px;
    margin-bottom: 20px; /* 下方向の余白 */
}
.page-header h4 {
    margin: 0;
}
.dev-note {
    font-size: 16px;
    color: #666;
    margin: 5px 0 0 20px;
}


/* --- 盤面関連のスタイル --- */
#board {
    margin: 0 auto;
    width: fit-content;
}

.board-row {
    display: flex; /* ボタンを横並びにする */
}

/* マス（Square）の基本スタイル */
.square {
    width: var(--square-size);
    height: var(--square-size);
    margin: 2px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: 1px solid var(--board-border-color);
    background-color: var(--board-bg-color);
    padding: 0;
}

/* --- 石のスタイル --- */
.square.selected::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 65%;
  height: 65%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: var(--stone-shadow);
}
.square.black-stone::before {
  background-color: black;
}
.square.white-stone::before {
  background-color: white;
  border: 1px solid #555;
  box-sizing: border-box;
}

/* --- クリック可能なマスのスタイル --- */
.square.can-select {
  cursor: pointer;
  opacity: 0.7;
}

/* --- クリックできないマス (石が置かれている、または置けない場所) --- */
.square.cant-select-1 {
  cursor: default;
  opacity: 1;
}

/* --- 行・列番号のマスのスタイル --- */
.btn-sign {
    width: var(--square-size);
    height: var(--square-size);
    margin: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: 1px solid var(--board-border-color);
    background-color: var(--sign-bg-color) !important;
    color: var(--sign-text-color);
    font-size: 28px;
    cursor: default;
    border-radius: 3px;
}

.btn {
  width: var(--square-size);
  height: var(--square-size);
  margin: 2px;
  font-size: 40px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- クリック可能なマス (初期状態) --- */
.btn-outline-dark2 {
    background-color: var(--board-bg-color);
    border-color: var(--board-border-color);
}

/* --- クリック可能なマスのホバー効果 --- */
.square.btn-outline-dark2:hover {
    background-color: #deff77;
    opacity: 1;
}

/* --- クリックできないマス (行列番号以外) --- */
.cant-select-1 {
    opacity: 1;
    cursor: default;
    pointer-events: none;
}

/* --- ルール説明欄 --- */
.rules-section {
    margin-top: 20px;
}
.rules-title {
    margin: 20px 0 10px 20px;
    padding: 5px;
    font-size: 14px;
    text-decoration: underline;
    display: inline-block;
}
.rules-content,
.rules-box {
    background-color: white;
    font-size: 12px;
    color: black;
    padding: 10px;
    margin: 0 0 0 10px; /* .rules-box の margin: 0px 0px 0px 10px; と同じ */
    width: 500px;
    border: 1px solid rgb(158, 32, 32);
    line-height: 1.8;
}
.rules-content h6,
.rules-box h6 {
    font-weight: bold;
    margin-top: 10px;
}
.rules-content ul, .rules-content ol,
.rules-box ul, .rules-box ol {
    padding-left: 20px;
}
.emphasis-mark {
    color: red;
}

/* --- スコア表示テーブル --- */
.score-table {
    margin-left: 20px;
    border-collapse: collapse;
    width: auto;
    margin-bottom: 20px;
    border: 1px solid black;
}
.score-table th, .score-table td {
    border: 1px solid black;
    padding: 0;
    vertical-align: middle;
    text-align: center;
    height: 40px;
}
.score-table thead th {
    font-size: 14px;
}
.score-header-player { background-color: var(--score-header-player-bg); width: 80px; }
.score-header-score  { background-color: var(--score-header-score-bg); width: 60px; }
.score-header-point  { background-color: var(--score-header-point-bg); width: 70px; font-size: 13px !important; line-height: 1.1; }
.score-header-total  { background-color: var(--score-header-total-bg); width: 60px; }
.score-header-stage  { background-color: var(--sign-text-color);   width: 80px; }

.score-table tbody td {
    font-size: 16px;
    background-color: white;
    width: 60px;
}
.player-symbol {
    width: 60px;
}

/* --- ボタン群 --- */
.button-group {
    display: flex;
    gap: 10px;
    margin-left: 20px;
    margin-bottom: 20px;
}
.action-button {
    width: 80px;
    height: 30px;
    font-size: 14px;
    color: navy;
    background-color: white;
    box-shadow: 0 0 0 1px navy inset, 0 0 0 2px white inset, 0 0 0 3px navy inset;
}
.action-button#StartButton1 {
    background-color: navy;
    color: white;
}
.reset-button {
    background-color: #bbffff;
}

/* --- 打手入力セクション --- */
.input-section {
    border: 1px solid black;
    background-color: white;
    padding: 15px;
    height: 410px; /* 以前tdにあった高さを指定 */
    width: 450px;  /* 以前tdにあった幅を指定 */
    box-sizing: border-box; /* paddingとborderを幅と高さに含める */
}
.input-guide {
    margin-bottom: 25px;
    margin-left: 20px;
    font-size: 14px;
    line-height: 1.6;
}
.input-guide h6 {
    font-weight: bold;
    margin-top: 1em;
}
.input-row {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}

/* ★追加: 入力欄のラベル */
.input-label {
    width: 70px; /* ラベルの幅 */
    height: 50px; /* 高さを入力欄と合わせる */
    font-weight: bold;
    font-size: 16px;
    margin-right: 5px; /* 入力欄との間隔 */
    flex-shrink: 0; /* 縮まないようにする */
    cursor: pointer; /* クリックできることを示すカーソル */
    display: inline-flex;
    align-items: center; /* 垂直方向の中央揃え */
    justify-content: center; /* 水平方向の中央揃え */
    border: 1px solid #888; /* 枠線を追加 */
    border-radius: 0.25rem; /* 角を少し丸める */
    background-color: #f8f9fa; /* 背景色を追加 */
    box-sizing: border-box; /* 枠線とパディングを高さと幅に含める */
}

/* 共通の入力欄スタイル */
.common-input {
    width: 90px;
    height: 50px;
    margin-right: 5px;
    text-align: center;
    font-size: 18px;
    box-sizing: border-box;
    border: 1px solid #ccc;
}

/* 先手入力欄 */
.input-orange {
    background-color: black;
    color: black;
}
.input-orange::placeholder {
    color: white;
    font-size: 16px;
}

/* 先手開示欄 */
.input-red {
    width: 75px;
    height: 50px;
    background-color: #999951;
    color: white;
    margin-left: 0px;
    margin-right: 5px;
    padding: 0;
    text-align: center;
    border: 2px solid #999951;
    box-sizing: border-box;
}
.input-red::placeholder {
    color: #ffffa9;
    font-size: 16px;
}

/* 後手入力欄 */
.input-green {
    background-color: white;
    color: white;
    border: 1px solid #ccc;
}
.input-green::placeholder {
    font-size: 16px;
    color: black;
}

/* 後手開示欄 */
.input-blue {
    width: 75px;
    height: 50px;
    background-color: #999951;
    color: white;
    margin-left: 0px;
    margin-right: 5px;
    padding: 0;
    text-align: center;
    border: 2px solid #999951;
    box-sizing: border-box;
}
.input-blue::placeholder {
    color: #ffffa9;
    font-size: 16px;
}

/* 認証ボタン */
.auth-button {
    width: 60px;
    height: 50px;
    margin-left: 15px;
    margin-right: 8px;
    padding: 0;
    font-size: 16px;
    cursor: pointer;
    border: 1px solid rgb(139, 133, 133);
    background-color: white;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}
.auth-button.authenticated {
    background-color: orange; /* 認証済み（クリック後）の色 */
}

/* クリアボタン */
.clear-button {
    width: 70px;
    height: 50px;
    margin-left: 5px;
    padding: 3px 8px;
    cursor: pointer;
    border: 1px solid #aaa;
    background-color: #eee;
    box-sizing: border-box;
}
.clear-button:hover {
    background-color: #ddd;
}
.clear-button[data-disable="true"] {
    cursor: not-allowed;
}

/* --- 初期配置のコマの文字色を設定 --- */
.btn.square.btn-outline-dark2.black {
    color: black;
    font-size: 30px;
}
.btn.square.btn-outline-dark2.white {
    color: white;
    font-size: 29px;
}

/* アクティブな入力欄の背景や枠線を設定する */
.input-active {
  background-color: yellow !important; /* !importantで優先度を上げる */
  border: 2px solid rgb(94, 82, 82);
}

/* --- メッセージエリア --- */
.message-container {
    margin-top: 10px;
    margin-left: 20px;
    min-height: 2.5em;
}

#messageArea {
    color: rgb(22, 1, 54);
    font-size: 15px;
}



/* 追加 */

.main-container {
    display: flex;
    flex-wrap: wrap; /* 画面幅が足りない場合に折り返す */
    gap: 20px;
    margin: 0 20px;
}

.board-container {
    vertical-align: top;
    flex-shrink: 0; /* 操作パネルに押されても盤面が縮まないようにする */
}

.control-panel {
    background-color: transparent;
    vertical-align: top;
    min-width: 480px; /* ボタンや入力欄が崩れない最小幅 */
    max-width: 520px; /* 広がりすぎないように最大幅も設定 */
    flex-grow: 1;     /* 利用可能なスペースに応じて広がる */
    padding-left: 20px;
    box-sizing: border-box;
}

.rules-title {
    margin: 40px 0px 10px 20px;
    align-self: flex-start;
    padding: 5px;
    font-size: 14px;
    text-decoration: underline;
    display: inline-block;
}

/* --- レスポンシブ対応 (タブレットサイズ) --- */
@media (max-width: 1024px) {
    .main-container {
        flex-direction: column; /* 画面が狭い場合は縦に並べる */
        align-items: center;    /* 中央揃えにして見やすくする */
        gap: 30px;
    }
    .control-panel {
        min-width: 90%; /* 画面幅に合わせて調整 */
        padding-left: 0;
    }
}

/* 最後の1マスをハイライトするためのスタイル */
.last-move-highlight {
    cursor: pointer;
    background-color: var(--highlight-color) !important; /* Bootstrapのwarningカラー（黄色） */
    border: 2px solid #dc3545; /* 赤色の枠線 */
    animation: pulse-animation 1.5s infinite;
}

/* ハイライトを点滅させるアニメーション */
@keyframes pulse-animation {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7); /* var(--highlight-color) のRGBa値 */
    }
    70% {
        box-shadow: 0 0 0 10px rgba(255, 193, 7, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);
    }
}